<template>
	<view class="content" v-if="pageShow">
		<view class="flexcenter">
			<view class="headimg" @click="uploadImg('avatar',1)">
				<image :src="avatar_text" mode="widthFix"></image>
				<view class="xiangji"></view>
			</view>
		</view>
		<view class="list">
			<view class="child flexbetween">
				<view class="name white_nowrap">昵称</view>
				<view class="color_ling text_d" @click="show = true">{{nickname}}</view>
			</view>
			<view class="child flexbetween">
				<view class="name white_nowrap">性别</view>
				<view class="flexleft">
					<u-radio-group
					    v-model="gender"
					    placement="row" circle>
						<!-- <u-radio activeColor="#f3271c" :customStyle="{marginRight: '30rpx'}" label="保密" name="0"></u-radio> -->
						<u-radio activeColor="#f3271c" :customStyle="{marginRight: '30rpx'}" label="男" name="1"></u-radio>
						<u-radio activeColor="#f3271c" label="女" name="2"></u-radio>
					</u-radio-group>
					<!-- <input class="margin_right1" type="text" placeholder="请选择性别" disabled>
					<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon> -->
				</view>
			</view>
			<!-- <view class="child flexbetween">
				<view class="name white_nowrap">星座</view>
				<view class="flexleft" @click="star_signShow=true">
					<input class="margin_right1" type="text" placeholder="请选择星座" v-model="star_signName" disabled>
					<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
				</view>
			</view> -->
			<view class="child flexbetween">
				<view class="name white_nowrap">生日</view>
				<view class="flexleft" @click="shows=true">
					<input class="margin_right1" type="text" placeholder="请选择生日" v-model="birthday" disabled>
					<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
				</view>
			</view>
			<view class="child flexbetween" v-if="age">
				<view class="name white_nowrap">年龄</view>
				<input class="margin_right1" type="text" placeholder="请选择生日" :value="age" disabled>
			</view>
			<view class="child flexbetween">
				<view class="name white_nowrap">已绑定手机号</view>
				<view class="flexleft" @click="goRevisePhone">
					<input class="margin_right1" type="text" v-model="mobile" disabled>
					<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
				</view>
			</view>
			<view class="child flexbetween">
				<view class="name white_nowrap">职业</view>
				<view class="flexleft" @click="occupationShow=true">
					<input class="margin_right1" type="text" placeholder="请选择职业" v-model="occupationName" disabled>
					<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
				</view>
			</view>
			<view class="child flexbetween">
				<view class="name white_nowrap">现住址</view>
				<uni-data-picker :localdata="items" @change="bindPickerChange">
					<view class="flexright">
						<input class="margin_right1" type="text" placeholder="请选择现住址" v-model="location" disabled>
						<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
					</view>
				</uni-data-picker>
				
			</view>
			<view class="child flexbetween">
				<view class="name white_nowrap">故乡</view>
				<uni-data-picker :localdata="items" @change="bindPickerChange2">
					<view class="flexright">
						<input class="margin_right1" type="text" placeholder="请选择故乡" v-model="birthplace" disabled>
						<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
					</view>
				</uni-data-picker>
				
			</view>
			<view class="child">
				<view class="name white_nowrap">资料</view>
				<view class="ffffff radius">
					<view class="flexleft flex_wrap">
						<view class="item_image_box margin_top" v-for="(item,index) in martial_images_arr" :key="index">
							<view class="item_image radius">
								<image :src="item" mode="widthFix"></image>
								<view class="deletimg" @click="deleimage(index,'martial_images')"></view>
							</view>
						</view>
						<!-- 图片盒子 -->
						<view class="item_image_box margin_top" @click="uploadImg('martial_images',3)" v-if="martial_images.length<3">
							<view class="item_image radius">
								<image src="/static/image/home/noimage.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="child flexbetween" @click="goInvoice">
				<view class="name white_nowrap">我的发票助手</view>
				<view class="flexleft">
					<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
				</view>
			</view>
			<!-- <view class="btn" @click="qrxiugai">保存</view> -->
			<!-- 二次确认修改信息 -->
		</view>
		<view class="footer">
			<view class="footerButton" @click="qrxiugai">
				保存
			</view>
		</view>
		<u-modal :show="show" :showConfirmButton="false" closeOnClickOverlay @close="show=false">
			<view class="slot-content">
				<view class="title">
					修改昵称
				</view>
				<view class="input">
					<input class="text_a" type="text" v-model="nickname" placeholder="请输入">
				</view>
				<view class="button" @click="show=false">确定</view>
			</view>
		</u-modal>
		 <u-picker :show="occupationShow" title="选择职业" :columns="occupation_arr" keyName="name" confirmColor="#FF0000" @confirm="occupationConfirm" @cancel="occupationShow=false"></u-picker>
		 <u-picker :show="star_signShow" title="选择星座" :columns="star_sign_arr" keyName="name" confirmColor="#FF0000" @confirm="star_signConfirm" @cancel="star_signShow=false"></u-picker>
		 <u-datetime-picker :show="shows" title="选择生日" v-model="value1" mode="date" :maxDate="time" :minDate="0"
		 	 confirmColor="#FF0000" @confirm="rzTimeconfirm" @cancel="shows=false"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	import upFile from "@/utils/upload.js"
	export default {
		data() {
			return {
				show: false,
				avatar:"",
				avatar_text:"",
				nickname:"",
				gender:"0",
				star_sign:"",
				birthday:"",
				mobile:"",
				age:"",
				occupation:"",
				location:"",
				birthplace:"",
				martial_images: [], //资料图片
				martial_images_arr: [], //资料图片
				occupationShow:false,
				occupationName:"",
				occupation_arr:[],//职业
				star_signShow:false,
				star_signName:"",
				star_sign_arr:[],//星座
				items: citys.data,
				area: [], //收获地址
				shows:false,
				time: Number(new Date()),
				value1: Number(new Date()),
				showTimeType: 1, //1选择生日，2选择入职时间
				pageShow:false
			}
		},
		onLoad() {
			this.getinfo()
		},
		methods: {
			getinfo() {
				let _this = this
				httpRequest.request('/api/user/profile_pre', 'GET', {
				}).then(res => {
					this.nickname = res.data.nickname
					this.avatar = res.data.avatar
					this.avatar_text = res.data.avatar_text
					this.gender = res.data.gender.toString() || "0"
					this.star_sign = res.data.star_sign
					this.star_signName = res.data.star_sign
					this.birthday = res.data.birthday
					let text1=res.data.mobile.slice(0,3)
					let text2=res.data.mobile.slice(7)
					this.mobile=`${text1}****${text2}`
					if(this.birthday){
						this.age=this.getAge(this.birthday.split("-"))[0]
					}
					this.occupation = res.data.occupation
					this.occupationName = res.data.occupation
					this.location = res.data.location
					this.birthplace = res.data.birthplace
					this.martial_images = res.data.martial_images?res.data.martial_images.split(','):[]
					this.martial_images_arr = res.data.martial_images_arr
					let arr1= res.data.occupation_arr
					let occupation_arr = []
					for( let key in arr1){
						occupation_arr.push({
							id:key,
							name:arr1[key]
						})
					}
					this.occupation_arr.push(occupation_arr)
					let arr2= res.data.star_sign_arr
					let star_sign_arr = []
					for( let key in arr2){
						star_sign_arr.push({
							id:key,
							name:arr2[key]
						})
					}
					console.log(star_sign_arr);
					this.star_sign_arr.push(star_sign_arr)
					this.pageShow=true
				})
			},
			rzTimeconfirm(e) {
				this.birthday = httpRequest.returnDate(e.value);
				this.shows = false;
			},
			occupationConfirm(e){
				// this.occupation = e.value[0].id
				this.occupation = e.value[0].name
				this.occupationName = e.value[0].name
				this.occupationShow = false
			},
			getAge(birthday) {
			    // 新建日期对象
			    let date = new Date()
			    // 今天日期，数组，同 birthday
			    let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
			    // 分别计算年月日差值
			    let age = today.map((value, index) => {
			        return value - birthday[index]
			    })
			    // 当天数为负数时，月减 1，天数加上月总天数
			    if (age[2] < 0) {
			        // 简单获取上个月总天数的方法，不会错
			        let lastMonth = new Date(today[0], today[1], 0)
			        age[1]--
			        age[2] += lastMonth.getDate()
			    }
			    // 当月数为负数时，年减 1，月数加上 12
			    if (age[1] < 0) {
			        age[0]--
			        age[1] += 12
			    }
			    return age
			},
			star_signConfirm(e){ //生日确认
				// this.star_sign = e.value[0].id
				this.star_sign = e.value[0].name
				this.star_signName = e.value[0].name
				this.star_signShow = false
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.location = area[0].text+"/"+area[1].text+"/"+area[2].text
			},
			bindPickerChange2(val) {
				let area = val.detail.value
				this.birthplace = area[0].text+"/"+area[1].text+"/"+area[2].text
			},
			goRevisePhone(){ //更改手机号
				uni.navigateTo({
					url:"/pages_mine/revisePhone"
				})
			},
			goInvoice(){ //发票助手
				uni.navigateTo({
					url:"/pages_mine/invoiceAide"
				})
			},
			qrxiugai() { //修改个人信息
				let _this = this;
				if (_this.nickname == '') {
					httpRequest.toast('请输入昵称')
					return
				}
				httpRequest.request('/api/user/profile', 'POST', {
					avatar:this.avatar,
					nickname:this.nickname,
					gender:this.gender,
					star_sign:this.star_sign,
					birthday:this.birthday,
					occupation:this.occupation,
					location:this.location,
					birthplace: this.birthplace,
					martial_images: this.martial_images.join(","), 
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast("修改成功")
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					} else {
						httpRequest.toast(res.msg)
					}

				})
			},
			deleimage(index,value){
				var that=this;
				if(value=="martial_images"){
					that.martial_images_arr.splice(index,1)
					that.martial_images.splice(index,1)
				}
			},
			uploadImg(value,length) {
				var that=this;
				if(value=="avatar"){
					upFile.chooseImage({count:1},function(res){
						that.avatar=res.url
						that.avatar_text=res.fullurl
					})
				}else{
					var martial_images=that.martial_images
					var martial_images_arr=that.martial_images_arr
					if(martial_images.length>=length){
						httpRequest.toast('最多上传'+length+'张图片');
						return ;
					}
					upFile.chooseImage({count:length-martial_images.length},function(res){
						console.log(res);
						martial_images_arr.push(res.fullurl)
						martial_images.push(res.url)
						console.log(martial_images_arr,martial_images);
						that.martial_images_arr=martial_images_arr
						that.martial_images=martial_images
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding-bottom: 60rpx;
	}
	.footer{
		padding: 30rpx;
		// background-color: #ffffff;
	}
	.slot-content {
		width: 100%;

		.title {
			font-size: 40rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			text-align: center;
		}

		.input {
			width: 100%;
			margin-top: 50rpx;
			text-align: center;
			padding: 30rpx 0;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
		.button{
			width: 420rpx;
			height: 81rpx;
			line-height: 81rpx;
			text-align: center;
			border-radius: 51rpx;	
			background-color: rgba(243, 39, 28, 1);
			margin: 60rpx auto 0;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	::v-deep.u-safe-area-inset-bottom {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);

	}

	.pops {
		padding: 0 60rpx 60rpx;

		.title {
			text-align: center;
			font-size: 36rpx;
			color: #000000;
			padding: 40rpx 0;
		}

		.lists {
			.sex {
				text-align: center;
				margin: 20rpx 0;
				color: #999999;
			}

			.sexs {
				color: #FF7510;
				text-align: center;
				margin: 20rpx 0;
			}
		}

		.submits {
			// background-image: linear-gradient(to right, #42CD5A, #55C900);
			background-color: #FF7510;
			border-radius: 40rpx;
			text-align: center;
			padding: 20rpx 0;
			color: #FFFFFF;
			font-size: 32rpx;
			margin: 30rpx 0rpx 0rpx 0rpx;
		}
	}


	.headimg {
		width: 180rpx;
		height: 180rpx;
		margin-top: 40rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.xiangji {
			width: 52rpx;
			height: 52rpx;
			position: absolute;
			bottom: 0;
			right: 0;
			background-size: 100% 100%;
			background-image: url('@/static/image/mine/xiangji.png');
		}
	}


	.list {
		//margin: 30rpx 20rpx;
		margin-top: 30rpx;
		padding: 20rpx;
		// border-radius: 20rpx;
		background-color: #FAFAFA;
		// background-color: red;

		.child {
			padding: 30rpx;
			background-color: #ffffff;
			margin-bottom: 30rpx;

			.name {
				font-size: 32rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #333333;
			}

			.data {
				.gerenxxyjt {
					width: 10rpx;
					height: 18rpx;
					margin-left: 10rpx;
					background-size: 100% 100%;
					// background-image: url('/static/image/my/phone.png');
				}

				.xingbie {
					color: #333333;
					font-size: 28rpx;
				}
			}

			input {
				text-align: right;
				color: #333333;
				font-size: 28rpx;
			}
		}
	}


	.btn {
		width: 90vw;
		color: #fff;
		background-color: rgba(243, 39, 28, 1);
		padding: 20rpx 0;
		text-align: center;
		border-radius: 44rpx;
		z-index: 100;
		margin: 30rpx 20rpx;
	}

	input {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}
</style>